<template>
    <el-aside :width="collapsed ? '64px' : '200px'" style="background-color: #f8fafd; padding: 0;">
      <el-button @click="collapsed = !collapsed" text class="toggle-btn qqqwwweee">

        <el-icon>
          <component :is="collapsed ? Expand : Fold" />
        </el-icon>
      </el-button>

      <el-menu :collapse="collapsed" router :default-active="$route.path" background-color="#f8fafd" text-color="#333"
        active-text-color="#409EFF" style="border-right: none;">
        <el-menu-item index="/inbox">
          <el-icon>
            <Message />
          </el-icon>
          <span>收件箱</span>
        </el-menu-item>
        <el-menu-item index="/sent">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>发件箱</span>
        </el-menu-item>
        <el-menu-item index="/drafts">
          <el-icon>
            <Edit />
          </el-icon>
          <span>草稿</span>
        </el-menu-item>
        <el-menu-item index="/trash">
          <el-icon>
            <Delete />
          </el-icon>
          <span>垃圾</span>
        </el-menu-item>
        <el-menu-item @click="$emit('compose')">
          <el-icon>
            <Plus />
          </el-icon>
          <span>写邮件</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

</template>

<script setup>
import { ref } from 'vue'
import { Message, Promotion, Edit, Delete, Plus, Fold, Expand } from '@element-plus/icons-vue'

const collapsed = ref(false)
</script>

<style scoped>
.toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-aside {
  transition: width 0.3s ease;
}

.qqqwwweee {
  width: 100%;
  font-size: 25px;
  display: flex;
  justify-content: end;
  padding: 15px 15px 15px 0;
  height: 50px;
}</style>
